<template>
  <div>
    <Card>
      <span slot="title">商品添加</span>
      <div slot="content">
        <el-form ref="addGoods" :model="addGoodsData" label-width="80px">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="addGoodsData.name" class="ipt-text" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="category">
            <el-select v-model="addGoodsData.category" placeholder="请选择商品分类">
              <el-option v-for="(item,index) in categories" :key="index" :label="item.cateName" :value="item.cateName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input-number v-model="addGoodsData.price" :precision="2" :step="0.1" :max="500"></el-input-number>
          </el-form-item>
          <el-form-item label="商品图片" prop="imgFullUrl">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/goods/goods_img_upload" :show-file-list=" false" :on-success="handleAvatarSuccess">
              <img v-if="addGoodsData.imgFullUrl" :src="addGoodsData.imgFullUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品描述" prop="goodsDesc">
            <el-input type="textarea" v-model="addGoodsData.goodsDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加商品</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { categories_api, addGoods_api } from "@/api/goods.js";
export default {
  components: {
    Card,
  },
  data() {
    return {
      addGoodsData: {
        name: "",
        category: "",
        price: "",
        imgFullUrl: "",
        imgUrl: "",
        goodsDesc: "",
      },
      categories: [],
    };
  },
  methods: {
    //获取所有分类名称
    async getCategories() {
      let res = await categories_api();
      this.categories = res.data.categories;
    },
    // 上传图片成功的钩子函数
    handleAvatarSuccess(res, file) {
      this.addGoodsData.imgUrl = res.imgUrl; //半截地址
      this.addGoodsData.imgFullUrl = URL.createObjectURL(file.raw); //完整地址
    },
    //重置表单
    resetForm() {
      this.$refs.addGoods.resetFields();
    },
    //添加商品
    async onSubmit() {
      let { name, category, price, imgUrl, goodsDesc } = this.addGoodsData;
      let res = await addGoods_api({
        name,
        category,
        price,
        imgUrl,
        goodsDesc,
      });
      if (res.data.code === 0) {
        this.$router.push("/goods/goodsList");
      }
    },
  },
  created() {
    this.getCategories();
  },
};
</script>

<style lang="less" scoped>
.ipt-text {
  width: 380px;
}
/deep/.el-input--suffix {
  width: 220px;
}
/deep/.el-textarea__inner {
  width: 380px;
  height: 100px;
}
/deep/.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
/deep/.avatar-uploader {
  height: 134px;
  .el-upload:hover {
    border-color: #409eff;
  }
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 134px;
  height: 134px;
  line-height: 134px;
  text-align: center;
}
/deep/.avatar {
  width: 134px;
  height: 134px;
  display: block;
}
</style>